<template>
  <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
    <div id="time-choose" v-show="timeShow" :timeShow="timeShow">
      <div class="time-c-box">
        <mu-card class="time-box">
          <div>
            <mu-row gutter>
              <mu-col
                span="3"
                v-for="(item,index2) in timeList"
                :key="index2"
                :class="{ checkprot:index2==time}"
                @click="checktime(index2,item.id)"
              >
                <div class="grid-cell">
                  {{item.title}}
                  <input
                    type="radio"
                    name="time-id"
                    :checked="index2==time"
                    :value="item.id"
                  />
                </div>
              </mu-col>
            </mu-row>
          </div>
        </mu-card>
        <div class="c-box-2">
          <mu-list>
            <mu-list-item>
              <mu-list-item-content>
                <mu-list-item-sub-title>
                  <div class="fleft order-timebox order-title" @click="showstime">
                    <div class="time-title">开始时间</div>
                    <div class="time-des">{{starttime}}</div>
                  </div>
                  <div class="hour-box">
                    <span class="hour">至</span>
                  </div>

                  <div class="fright order-timebox order-title" @click="showetime">
                    <div class="time-title">结束时间</div>
                    <div class="time-des">{{endtime}}</div>
                  </div>
                  <div class="_clear"></div>
                </mu-list-item-sub-title>
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item>
              <mu-list-item-content>
                <mu-list-item-title class="c-btn-box">
                  <mu-button class="blur-btn btn fleft out-btn" @click="close">取消</mu-button>
                  <mu-button class="blur-btn btn fright" @click="submit">确定</mu-button>
                  <div class="_clear"></div>
                </mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>
          </mu-list>
        </div>
      </div>

      <van-popup v-model="stimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="start.currentDate"
          type="date"
          :min-date="start.minDate"
          :max-date="start.maxDate"
          @confirm="startTimeChange"
          @cancel="stimeshow = false"
        />
      </van-popup>
      <van-popup v-model="etimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="end.currentDate"
          type="date"
          :min-date="end.minDate"
          :max-date="end.maxDate"
          @confirm="endTimeChange"
          @cancel="etimeshow = false"
        />
      </van-popup>
    </div>
  </transition>
</template>

<script>
    import Vue from "vue";
    import { Popup, Toast } from "vant";
    import {DatetimePicker} from "vant";
    import "vant/lib/popup/style/index";
    import "vant/lib/datetime-picker/style/index";
    import {formatDate} from "../../utils/formart";

    Vue.use(DatetimePicker);
    Vue.use(Popup);
    export default {
        data() {
            return {
                timeShow: false,
                time: 0,
                stimeshow: false,
                etimeshow: false,
                a: new Date(),
                starttime: formatDate(new Date(), "yyyy-MM-dd"),
                endtime: formatDate(new Date(), "yyyy-MM-dd"),
                timeList: [
                    {id: 0, title: "今天"},
                    {id: 1, title: "近7天"},
                    {id: 2, title: "近15天"},
                    {id: 3, title: "近30天"}
                ],
                start: {
                    minHour: 10,
                    maxHour: 20,
                    maxDate: new Date(),
                    currentDate: new Date()
                },
                choose: {
                    stime: formatDate(new Date(), "yyyy-MM-dd"),
                    etime: formatDate(new Date(), "yyyy-MM-dd"),
                },
                end: {
                    minHour: 10,
                    maxHour: 20,
                    minDdate: this.starttime,
                    maxDate: new Date(),
                    currentDate: new Date()
                }
            };
        },
        methods: {
            Showtimediv() {
                this.timeShow = true;
            },
            showstime() {
                this.stimeshow = true;
            },
            showetime() {
                this.etimeshow = true;
            },
            endTimeChange(e) {
                if (e < this.a) {
                    Toast('结束时间不能小于开始时间');
                    return;
                }
                this.endtime = formatDate(e, "yyyy-MM-dd ");
                this.choose.etime = formatDate(e, "yyyy-MM-dd ");
                this.etimeshow = false;
            },
            startTimeChange(e) {
                this.a = e;
                this.starttime = formatDate(e, "yyyy-MM-dd ");
                this.choose.stime = formatDate(e, "yyyy-MM-dd ");
                this.stimeshow = false;
            },
            checktime(index, id) {
                this.time = index;
                switch (id) {
                    case 0:
                        this.starttime = formatDate(new Date(), "yyyy-MM-dd")
                        break;
                    case 1:
                        let stamp = new Date() - 7 * 24 * 60 * 60 * 1000;
                        let date = formatDate(new Date(stamp), "yyyy-MM-dd");
                        this.starttime = date;
                        break;
                    case 2:
                        stamp = new Date() - 15 * 24 * 60 * 60 * 1000;
                        date = formatDate(new Date(stamp), "yyyy-MM-dd");
                        this.starttime = date;
                        break;
                    case 3:
                        stamp = new Date() - 30 * 24 * 60 * 60 * 1000;
                        date = formatDate(new Date(stamp), "yyyy-MM-dd");
                        this.starttime = date;
                        break;
                    default:
                        break;
                }
            },
            close() {
                this.timeShow = false;
            },
            submit() {
                this.$emit("chooseTime", {startTime: this.starttime, endTime: this.endtime});
                this.timeShow = false;
            }
        }
    };
</script>

<style>
</style>
